
import TinyReact from './TinyReact'
    
const root = document.querySelector('#root')

const virtualDOM = (
    <div className="container">
        <h1>你好 Tiny React</h1>
        <h2 data-test="test">(编码必杀技)</h2>
        <div>
            嵌套1 <div>嵌套 1.1</div>
        </div>
        <h3>(观察: 这个将会被改变)</h3>
        {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
        {2 == 2 && <div>2</div>}
        <span>这是一段内容</span>
        <button onClick={() => alert("你好")}>点击我</button>
        <h3>这个将会被删除</h3>
        2, 3 <input type="text" value="123"></input>
    </div>
)

const modifyDOM = (
    <div className="container">
        <h1>你好 Tiny React 123213213123</h1>
        <h2 data-test="test1">(编码必杀技)</h2>
        <div>
            嵌套1 <div>嵌套 1.1</div>
        </div>
        <h3>(观察: 这个将会被改变)</h3>
        {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
        {2 == 2 && <div>2</div>}
        <span>这是一段内容</span>
        <button onClick={() => alert("你q好")}>点击我</button>
    </div>
)

// TinyReact.render(virtualDOM,root)   


// setTimeout( () => {
//     TinyReact.render(modifyDOM,root)   
// }, 2000)

function Demo () {
    return <div>hello</div>
}

function Heart (props) {
    return <div>
        <Demo></Demo>
        <div>
            {props.title}
        &hearts;
        </div>
    </div>
}

// TinyReact.render(<Heart title="hello React" />, root)

// console.log(virtualDOM)


class Alert extends TinyReact.Component {
    constructor(props){
        super(props)
        this.state = {
            title: '这是我的title'
        }
        this.handleClick = this.handleClick.bind(this)
    }
    handleClick(){
        console.log(123)
        this.setState({
            title: '这是我修改后的title'
        })
    }
    render () {
        console.log(this.state)
        return <div>
            {this.props.name}
            {this.props.age}
            <div>
                {this.state.title}
                <button type="button" onClick={this.handleClick}>点击修改title</button>
            </div>
        </div>
    }
}


TinyReact.render(<Alert name="张三" age={20}></Alert>,root)

setTimeout(() => {
    TinyReact.render(<Alert name="lisi" age={80}></Alert>,root)
}, 2000);